<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <script src="/static/vendor/jquery/jquery.min.js"></script>


</head>

<body id="page-top">

<div class="row" style="width: 100%">
    <div class="col-lg-8">
        <!-- Form Basic -->
        {#        <div class="card mb-4">#}
        <iframe id="miframe" name="miframe" width="100%" height=800px seamless frameborder=0 marginwidth=0
                marginheight=0
                src="/function/wait_editor">
        </iframe>
        {#        </div>#}
    </div>
    <div class="col-lg-4">

        <!-- Function Operation -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="m-0 font-weight-bold text-primary">Function Operation</h6>
                <div style="margin-top: 15px;align-items: center">
                    <div style="height:48px;width: 14%;float: right;align-items: center;padding-top: 3px">
                        <img src="/static/images/setting5.png" style="float: right;margin-right: 50%">
                    </div>
                    <div style="height:48px;width: 43%;float: right;align-items: center">
                        <button type="button" class="btn btn-outline-primary mb-1" onclick="deploy_function()">DEPLOY
                        </button>
                        <img id="deploy_image_id" src="/static/images/white.png" data-toggle="popover"
                             title="" data-placement="right"
                             data-content="">
                    </div>
                    <div style="height:48px;width: 43%;align-items: center" id="build_div_id">
                        <button type="button" class="btn btn-outline-primary mb-1" onclick="build_function()">BUILD
                        </button>
                        <img id="build_image_id" src="/static/images/white.png" data-toggle="popover"
                             title="" data-placement="right"
                             data-content="">
                    </div>
                </div>

            </div>

        </div>

        <!-- Function information-->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="m-0 font-weight-bold text-primary">Function Information</h6>
                <form style="margin-top: 10px">
                    <div class="form-group" style="width: 45%;float: right">
                        <label for="exampleFormControlReadonly">Function Template</label>
                        <input class="form-control" type="text" placeholder={{ function_lang }}
                                id="exampleFormControlReadonly" readonly>
                    </div>
                    <div class="form-group" style="width: 45%;">
                        <label for="exampleFormControlReadonly">Function Name</label>
                        <input class="form-control" type="text" placeholder={{ function_name }}
                                id="exampleFormControlReadonly" readonly>
                    </div>
                </form>
            </div>
        </div>

        <!-- Function Test -->
        <div class="card mb-4">
            <div class="card-body">
                <h6 class="m-0 font-weight-bold text-primary">Function Test</h6>
                <div class="input-group mb-3" style="margin-top: 15px">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon3">Function URL</span>
                    </div>
                    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"
                           value="{{ function_url }}" readonly>
                    <button type="button" class="btn btn-outline-primary mb-1" style="margin-left: 5px;overflow:scroll"
                            onclick="invoke_function()">INVOKE
                    </button>
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            Request Body
                        </div>
                    </div>
                    <textarea id="request-body-textarea" class="form-control" aria-label="With textarea"
                              rows="4"></textarea>
                </div>

                <div class="input-group mb-3">
                    <textarea id="function-test-textarea" class="form-control"
                              rows="6" readonly
                              style="overflow:scroll"
                              placeholder="response will be shown here once button was clicked"></textarea>
                </div>


            </div>
        </div>

    </div>
</div>


<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<script type="text/javascript">
    var code_editor_src;
    var interval;

    function code_editor() {
        $.get('/function/code_editor_ready', function (res) {
            if (res['status']) {
                document.getElementById("miframe")["src"] = code_editor_src
                clearInterval(interval)
            }
        })
    }

    function build_function() {
        document.getElementById('build_image_id').src = "/static/images/loading.png"
        $.post('/function/build_function', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (res) {
            if (res["succeed"]) {
                document.getElementById('build_image_id').src = "/static/images/succeed3.png"
                document.getElementById('build_image_id').attributes[5].nodeValue = res["info"]
                document.getElementById('build_image_id').attributes[6].nodeValue = "build succeed!"
            } else {
                document.getElementById('build_image_id').src = "/static/images/error2.png"
                document.getElementById('build_image_id').attributes[5].nodeValue = res["info"]
                document.getElementById('build_image_id').attributes[6].nodeValue = "build failed!"
            }
        })
    }

    function deploy_function() {
        document.getElementById('deploy_image_id').src = "/static/images/loading.png"
        $.post('/function/deploy_function', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (res) {
            if (res["succeed"]) {
                document.getElementById('deploy_image_id').src = "/static/images/succeed3.png"
                document.getElementById('deploy_image_id').attributes[5].nodeValue = res["info"]
                document.getElementById('deploy_image_id').attributes[6].nodeValue = "deploy succeed!"
            } else {
                document.getElementById('deploy_image_id').src = "/static/images/error2.png"
                document.getElementById('deploy_image_id').attributes[5].nodeValue = res["info"]
                document.getElementById('deploy_image_id').attributes[6].nodeValue = "deploy failed!"
            }
        })
    }

    function invoke_function() {
        console.log('invoke_function')
        document.getElementById('function-test-textarea')['placeholder'] = 'please wait, processing...'
        $.post('/function/invoke_function', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'function_name': '{{ function_name }}',
            'function_input': document.getElementById('request-body-textarea').value
        }, function (res) {
            document.getElementById('function-test-textarea')['placeholder'] = res['result']
        })
    }

    function report_alive() {
        $.post('/function/free_code_editor/', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (res) {
            console.log('{{ function_name }} alive: ' + res)
        })
    }

    $(function () {
        $(window).unbind('beforeunload');
        window.onbeforeunload = null;
        $.get("/function/get_code_editor_src", function (res) {
            code_editor_src = res['code_editor_src']
        })
        interval = setInterval(code_editor, 1000)
        setInterval(report_alive, 1000 * 60 * 10)
    })
</script>
<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/ruang-admin.min.js"></script>
<script src="/static/vendor/chart.js/Chart.min.js"></script>
<script src="/static/js/demo/chart-area-demo.js"></script>
</body>

</html>